<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/Vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../ele-2.15.7/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../ele-2.15.7/index.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
<!--            style="display: flex; align-items: center"-->
            <el-form :inline="true" class="demo-form-inline" >
                <el-form-item label="书名">
                    <el-input   placeholder="书名"></el-input>
                </el-form-item>
                <el-form-item label="作者">
                    <el-input  placeholder="作者"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >查询</el-button>
<!--                    @click.prevent="query(1)"-->
                </el-form-item>
            </el-form>
        </el-header>
        <el-main>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>

</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        },
        // created(){
        //     this.query(1);
        // },
        // methods:{
        //     sizeChange(size){
        //         this.pageSize =
        //     }
        // }
    })
</script>
</body>
</html>

<style>
    html,body,#app{
        height: 100%;
        padding: 0px;
        margin: 0px;
    }
    .el-container {
        height: 100%;
    }
</style>